<template>
  <div class="gc-dialog-component">
    <el-dialog
      v-model="visible"
      :title="title"
      :width="width"
      :close-on-click-modal="false"
      :class="`${appendToBody ? 'custom-dialog-body' : 'custom-dialog'}`"
      :visible-close="showClose"
      :destroy-on-close="needDestroy"
      :append-to-body="appendToBody"
      @close="handleCancle"
      @open="handleOpen"
    >
      <template #header v-if="$slots.header">
        <slot name="header"></slot>
      </template>
        <el-scrollbar :max-height="screenHeight - 300">
          <slot></slot>
        </el-scrollbar>

      <template #footer v-if="showFooter">
        <slot name="footer" v-if="$slots.footer"></slot>
        <div class="dialog-footer" v-else>
          <div class="footer-left">
            <slot name="footerLeft"></slot>
          </div>
          <el-button v-if="!hiddenCancel" @click="handleCancle">取消</el-button>
          <el-button
            :disabled="disabled"
            type="primary"
            @click="handleConfirm"
            :loading="loading"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    required: true,
    default: false
  },
  title: {
    type: String,
    default: '弹窗标题'
  },
  width: {
    type: String,
    default: '480px'
  },
  showClose: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  needDestroy: {
    type: Boolean,
    default: true
  },
  appendToBody: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  hiddenCancel: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:dialogVisible', 'cancel', 'ok', 'open'])

const visible = computed({
  get: () => {
    return props.dialogVisible
  },
  set: (val) => {
    emit('update:dialogVisible', val)
  }
})

const screenHeight = ref(document.documentElement.clientHeight)

function handleCancle () {
  emit('cancel')
}

function handleConfirm () {
  emit('ok')
}

function handleOpen () {
  emit('open')
}
</script>

<style lang="scss">
.custom-dialog-body {
  @include dialog-style;
}
</style>

<style lang="scss" scoped>
:deep(.custom-dialog) {
  @include dialog-style;
}
</style>
